<template>
    <div class="search-box">
        <div class="flex">
            <div>
                <el-icon>
                    <Search />
                </el-icon>
                <span>筛选搜索</span>
            </div>
            <div>
                <el-button @click="resetForm">重置</el-button>
                <el-button @click="submitFn" type="primary">查询搜索</el-button>
            </div>
        </div>
        <div style="padding-top: 20px" class="box-bottom">
            <el-form @submit.prevent="submitFn" ref="searchFormRef" :model="listParams">
                <el-form-item label="广告名称:" label-width="120px" prop="subjectName">
                    <el-input v-model="listParams.subjectName" placeholder="广告名称" />
                </el-form-item>
            </el-form>
            <el-form @submit.prevent="submitFn" ref="searchFormRefW" :model="listParams">
                <el-form-item label="推荐状态:" label-width="120px" prop="recommendStatus">
                    <el-select v-model="listParams.recommendStatus" class="m-2" placeholder="全部">
                        <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
    </div>

    <!--  -->
    <div class="add-box">
        <div class="left">
            <el-icon>
                <Tickets />
            </el-icon>
            <span>数据列表</span>
        </div>
        <el-button text @click="specialFn">选择专题</el-button>
    </div>

    <el-table :data="list" style="width: 100%" @selection-change="handleSelectionChange" border>

        <el-table-column type="selection" width="55" />

        <el-table-column prop="id" label="编号"> </el-table-column>
        <el-table-column prop="subjectName" label="专题名称"></el-table-column>

        <!-- 是否启用 -->
        <el-table-column label="是否推荐">
            <!-- 通过插件得到的scope是每一列里面的 数据对象 -->
            <template #default="scope">
                <el-switch v-model="scope.row.recommendStatus" :active-value="1" :inactive-value="0"
                    @change="changeHandle(scope.row.recommendStatus, scope.row.id)">
                </el-switch>
            </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序"></el-table-column>
        <el-table-column prop="recommendStatus" label="状态">
            <template #default="scope">
                {{ scope.row.recommendStatus ? '推荐中' : '未推荐' }}
            </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作">
            <template #default="scope">
                <el-button link type="primary" @click="handleEdit(scope.row.sort, scope.row.id)">
                    设置排序
                </el-button>
                <el-button link type="primary" @click="editHandle(scope.row.id)">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="bottom">
        <div>
            <!-- 选择器 -->
            <BtnOption @optionsvalue="optionsvalue" />
        </div>

        <!-- 底部分页 -->
        <ElConfigProvider :locale="zhCn">
            <el-pagination v-model:currentPage="listParams.pageNum" v-model:page-size="listParams.pageSize" background
                layout="total, sizes, prev, pager, next ,jumper" :total="listParams.total" @size-change="pageSizeChagne"
                @current-change="currentChagne" :page-sizes="[5, 10, 15]" />
        </ElConfigProvider>
    </div>

    <!-- 选择专业 -->
    <el-dialog v-model="outerVisible" title="选择专题">
        <template #default>
            <el-dialog v-model="innerVisible" width="30%" title="Inner Dialog" append-to-body />
            <!-- 输入框 -->
            <el-input v-model="ListParams.keyword" placeholder="专题名称搜索" class="input-with-select">
                <template #append>
                    <el-button :icon="Search" @click="SearchFn" />
                </template>
            </el-input>
            <!-- 彪哥 -->
            <el-table :data="Istate.List" border style="width: 100%" @selection-change="SelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="title" label="专题名称" width="180" />
                <el-table-column prop="categoryName" label="所属分类" width="180" />
                <el-table-column prop="createTime" label="添加时间">
                    <template #default="scope">
                        {{ fomatDate(scope.row.createTime) }}
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination v-model:page-size="ListParams.pageSize" v-model:currentPage="ListParams.pageNum" background
                layout="prev, pager, next" :total="Istate.total" @size-change="pageSizeChagn"
                @current-change="currentChagn" />
        </template>
        <!-- 分页 -->

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="outerVisible = false">取消</el-button>
                <el-button type="primary" @click="Add">
                    确定
                </el-button>
            </div>
        </template>

    </el-dialog>
    <Sort :outer='outer' :sort="sort" :sortid="sortid" @add="emitsureFn" />
</template>
<script setup lang='ts'>
import Sort from "@/components/Sort.vue";
import { user } from '@/api';
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
import { reactive, ref, toRefs } from 'vue';
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { Search } from '@element-plus/icons-vue'
import { fomatDate } from '@/utils';
import BtnOption from "../ums/components/btnOption.vue";

const outerVisible = ref(false)
const innerVisible = ref(false)
// innerVisible = true



interface List {
    list: recommendSubjectList[]
    listParams: recommendSubjectParams


}



const state = reactive<List>({
    list: [],
    listParams: {
        pageNum: 1,
        pageSize: 5,
        total: 0,
        totalPage: 0,
        recommendStatus: '',
        subjectName: ''
    }

})

const recommendSubject = () => {
    user.recommendSubjectApi(state.listParams).then(res => {
        if (res.code === 200) {
            // console.log(res);
            state.list = res.data.list
            state.listParams.total = res.data.total
        }

    })
}
recommendSubject()


const options2 =
    [
        {
            value: 0,
            label: '未推荐',
        },
        {
            value: 1,
            label: '推荐中',
        },
    ]
//重置
const searchFormRef = ref<FormInstance>();
const searchFormRefW = ref<FormInstance>()
const resetForm = () => {
    searchFormRef.value?.resetFields()
    searchFormRefW.value?.resetFields()
}
//查询
const submitFn = () => {
    recommendSubject()
}
const currentChagne = (val: number) => {
    recommendSubject()
}
const pageSizeChagne = () => {
    recommendSubject()
}
//点按推荐
const changeHandle = (a: number, ID: number[]) => {
    ElMessageBox.confirm("是否修改当前状态", "提示", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消"
    }).then(res => {
        user.recommendStatusApi({ ids: ID, recommendStatus: a }).then(res => {
            recommendSubject()

        })
    }).catch(() => {
        recommendSubject()
    })
}

//排序
const outer = ref(false)
const sort = ref(0)
const sortid = ref(0)
// const inner = ref(false)
const handleEdit = (Sort: number, Sortid: number) => {
    outer.value = true

    sort.value = Sort
    sortid.value = Sortid



}
const emitsureFn = (numsort: number, numid: number) => {
    // console.log(numsort, numid);

    ElMessageBox.confirm("是否要修改排序", "提示", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消"
    }).then(() => {
        user.recommendProductupdateApi({ id: numid, sort: numsort }).then(res => {
            if (res.code === 200) {
                outer.value = false
                recommendSubject()
            }

        })
    }).catch(() => { })



}

const editHandle = (a: any) => { }

// 专题
interface IState {
    List: subjectListData[]
    ListParams: IUserListParams
    total: number
}
const Istate = reactive<IState>({
    List: [],
    ListParams: {
        keyword: '',
        pageNum: 1,
        pageSize: 5,
        parentId: 0
    },
    total: 0
})

const SubjectList = () => {
    user.subjectListApi(Istate.ListParams).then(res => {
        if (res.code === 200) {
            // console.log(res);
            Istate.List = res.data.list
            Istate.total = res.data.total
        }


    })
}
const specialFn = () => {
    outerVisible.value = true
    SubjectList()


}
//选择专题搜索
const SearchFn = () => {
    specialFn()
}
const pageSizeChagn = () => {
    SubjectList()
}
const currentChagn = () => {
    SubjectList()
}
//添加

let ID = reactive<recommendSubjectList[]>([])
const SelectionChange = (val: any) => {
    // console.log(val);

    // val.map((item: recommendSubjectList) => {
    //     ID.push(item)
    // })
    // console.log(ID);
    // Object.assign(ID, val)
    ID = val
    // console.log(ID);



}
const Add = () => {
    ElMessageBox.confirm("使用要进行添加操作", "提示", {
        type: 'warning',
        confirmButtonText: "确定",
        cancelButtonText: "取消",
    }).then(() => {
        user.recommendSubjectCreateApi(ID).then(res => {
            //隐藏
            outerVisible.value = false
            //重请
            recommendSubject()
            ID = []
        })
    }).catch(() => { })
}
// interface paramsData {
//     ids: number[],
//     recommendStatus: number
// }
// const params = reactive<paramsData>({
//     recommendStatus: 0,
//     ids: multipleSelection
// })
//坐下选择器multipleSelection
let multipleSelection = reactive<number[]>([])

const handleSelectionChange = (val: any) => {
    console.log(val);
    if (multipleSelection.length > val.length || multipleSelection.length === val.length) {
        multipleSelection = []
    }

    val.map((item: recommendSubjectList) => {
        multipleSelection.push(item.id)

    })


    // console.log(multipleSelection);

}
//坐下选择器multipleSelection
const optionsvalue = (value: number) => {
    console.log(multipleSelection);
    ElMessageBox.confirm("是否修改状态", "提示", {
        type: 'warning',
        confirmButtonText: "确定",
        cancelButtonText: "取消",
    }).then(() => {
        if (multipleSelection.length !== 0) {
            //2删除 0推荐 1未推荐
            if (value === 0) {
                user.recommendStatusApi({ ids: multipleSelection, recommendStatus: 1 }).then(res => {
                    if (res.code === 200) {
                        recommendSubject()
                        multipleSelection = []
                    }
                })
            } else if (value === 1) {
                user.recommendStatusApi({ ids: multipleSelection, recommendStatus: 0 }).then(res => {
                    if (res.code === 200) {
                        recommendSubject()
                    }
                })
            } else if (!value) {
                ElMessage.warning("请选择一项")
            } else if (!value) {
                ElMessage.warning("请选择一项状态")
            }
        } else {
            // console.log(2);

            ElMessage.warning("请勾选需要修改的目标")
        }

    }).catch(() => { })
}
// console.log(multipleSelection);

const { list, listParams } = toRefs(state)
const { List, ListParams } = toRefs(Istate)

</script>
<style lang="less" scoped>
.search-box {
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0px 0px 6px 0px gray;
    margin-bottom: 30px;

    .box-bottom {
        display: flex;
    }

    .flex {
        display: flex;
        justify-content: space-between;
    }

    .el-icon {
        margin-right: 10px;
    }

    .el-input {
        width: 250px;
    }

    .el-select {
        width: 250px;
    }
}

.bottom {
    display: flex;
    justify-content: space-between;
}

.add-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 0 4px 2px #ccc;

    .box-bottom {
        display: flex;

    }

    .left {
        display: flex;
        align-items: center;
        padding: 0 10px;

        .el-icon {
            margin-right: 10px;
        }

    }

    .el-button {
        margin-right: 10px;
    }

}

.dialog-footer button:first-child {
    margin-right: 10px;
}

.el-input {
    width: 300px;
    margin-bottom: 20px;
}
</style>